<template>
	<a-form
		ref="formRef"
		:model="formData"
		autocomplete="off"
		labelAlign="right"
		:rules="formRules"
		:wrapper-col="{ span: 16 }"
		:label-col="{ span: 8 }"
	>
		<a-row>
			<a-col :span="12">
				<a-form-item label="公司名称" name="companyName">
					<a-input v-model:value="formData.companyName" placeholder="请输入公司名称" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="企业征信代码" name="creditCode">
					<a-input v-model:value="formData.creditCode" placeholder="请输入企业征信代码" />
				</a-form-item>
			</a-col> </a-row
		><a-row>
			<a-col :span="12">
				<a-form-item label="经营地址" name="businessAddr">
					<a-input v-model:value="formData.businessAddr" placeholder="请输入经营地址" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="固定电话" name="fixedPhone">
					<a-input v-model:value="formData.fixedPhone" placeholder="请输入固定电话" />
				</a-form-item>
			</a-col> </a-row
		><a-row>
			<a-col :span="12">
				<a-form-item label="注册地址" name="registAddr">
					<a-input v-model:value="formData.registAddr" placeholder="请输入经营地址" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="主营范围" name="mainRange">
					<a-input v-model:value="formData.mainRange" placeholder="请输主营范围" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="12">
				<a-form-item label="线上采购:">
					<a-checkbox v-model:checked="formData.onlinePurchase"></a-checkbox>
				</a-form-item>
				<a-form-item label="平台名:" name="platform">
					<a-input v-model:value="formData.platform" placeholder="请输入平台名" />
				</a-form-item>
				<a-form-item label="采购网址:" name="purchaseSite">
					<a-input v-model:value="formData.purchaseSite" placeholder="请输入采购网址" />
				</a-form-item>
				<a-form-item label="负责人:" name="headId">
					<xn-page-selector
						:field-names="{ label: 'name', value: 'id' }"
						:page-function="(param) => bizUserApi.userPage(param)"
						:show-search="true"
						search-field="name"
						@change="onHeadChange"
						ref="userRef"
						v-model:value="formData.headId"
						placeholder="请选择负责人"
					>
					</xn-page-selector>
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="营业执照" name="businessLicense">
					<ImageUpload @uploadRemove="uploadRemove" @uploadDone="uploadDone" ref="uploadRef" />
				</a-form-item>
				<a-form-item label="备注" name="remark">
					<a-textarea
						:auto-size="{ minRows: 2, maxRows: 2 }"
						v-model:value="formData.remark"
						placeholder="请输入备注"
					/>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="24">
				<div>
					<span style="margin-right: 13px; padding-left: 13px">联系人:</span>
					<a-button type="primary" class="childAddButton" @click="addContact()">
						<PlusOutlined />
						新增
					</a-button>
					<a-popconfirm title="是否删除?" @confirm="removeContact()">
						<a-button style="margin-left: 12px" type="remove" danger>
							<LineOutlined />
							删除</a-button
						>
					</a-popconfirm>
				</div>
				<a-table
					:row-selection="options.rowSelection"
					:pagination="false"
					:columns="columns"
					:data-source="formData.contactsList"
				>
					<template #emptyText>
						<span>添加联系人</span>
					</template>
					<template #bodyCell="{ column, index, record }">
						<template v-if="column.dataIndex === 'index'">
							<span>{{ index + 1 }}</span>
						</template>
						<template v-if="column.dataIndex === 'name'">
							<div class="editable-cell">
								<a-input v-model:value="record.name" />
							</div>
						</template>
						<template v-if="column.dataIndex === 'phone'">
							<div class="editable-cell">
								<a-input :maxlength="11" v-model:value="record.phone" />
							</div>
						</template>
						<template v-if="column.dataIndex === 'remark'">
							<div class="editable-cell">
								<a-input v-model:value="record.remark" />
							</div>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup name="supplierCompanyForm">
	import { message } from 'ant-design-vue'
	import { required, rules } from '@/utils/formRules'
	import tool from '@/utils/tool'
	import ImageUpload from '@/components/XnUploadImage/index.vue'
	import xnPageSelector from '@/components/XnPageSelect/index.vue'
	import bizUserApi from '@/api/biz/bizUserApi'
	import { onMounted } from 'vue'
	const formRef = ref()
	const formData = ref({})
	const userRef = ref()
	const uploadRef = ref()
	const options = {
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const selectedRowKeys = ref([])
	// 默认要校验的
	const formRules = {
		companyName: [required('请输入公司名称')],
		platform: [required('请输入平台名')],
		creditCode: [required('请输入企业征信代码')],
		businessAddr: [required('请输入经营地址')],
		fixedPhone: [required('请输入电话')],
		registAddr: [required('请输入注册地址')],
		headId: [required('请输入负责人')],
		mainRange: [required('请输入主营范围')],
		businessLicense: [required('请选择营业执照')]
	}

	const onHeadChange = (id, item) => {
		formData.value.head = item.name
	}

	onMounted(() => {
		userRef.value.onPage({})
	})
	const addContact = () => {
		if (!formData.value.contactsList) {
			formData.value.contactsList = []
		}
		formData.value.contactsList.push({
			key: tool.snowyUuid(),
			remark: '',
			phone: '',
			name: ''
		})
	}

	const uploadDone = (files) => {
		formData.value.businessLicense = files[0].url
	}
	const uploadRemove = (file) => {
		formData.value.businessLicense = null
	}
	const removeContact = () => {
		let datas = formData.value.contactsList
		if (!datas || datas.length <= 0) {
			message.error('请选择联系人!')
			return
		}
		selectedRowKeys.value.forEach((element) => {
			let index = datas.findIndex((it) => {
				return it['key'] == element
			})
			if (index >= 0) {
				datas.splice(index, 1)
			}
		})
		selectedRowKeys.value = []
	}

	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			align: 'center',
			width: 80
		},
		{
			title: '姓名',
			dataIndex: 'name',
			align: 'center'
		},
		{
			title: '联系方式',
			dataIndex: 'phone',
			align: 'center'
		},
		{
			title: '备注',
			dataIndex: 'remark',
			align: 'center'
		}
	]

	const validatecontactsList = () => {
		const { contactsList } = formData.value

		if (!contactsList || contactsList.length <= 0) {
			message.error('请添加联系人!')
			return false
		}
		for (let i = 0; i < contactsList.length; i++) {
			let it = contactsList[i]
			if (!it.name) {
				message.error(`第${i + 1}行名称不能为空!`)
				return false
			}
			if (!it.phone) {
				message.error(`第${i + 1}行手机号不能为空!`)
				return false
			}
		}
		return true
	}
	const validate = () => {
		return new Promise((resolve, rejected) => {
			formRef.value
				.validate()
				.then(() => {
					if (validatecontactsList()) {
						resolve()
					} else {
						rejected(new Error('联系人校验失败!'))
					}
				})
				.catch((e) => {
					rejected(e)
				})
		})
	}

	const setFormValue = (value) => {
		formData.value = value
		if (value.businessLicense) {
			uploadRef.value.setUploadFields([
				{
					url: value.businessLicense
				}
			])
		}
	}

	const restForm = () => {
		formData.value = {}
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		formData,
		validate,
		setFormValue,
		restForm
	})
</script>

<style scoped :type="less">
	.childAddButton {
		margin-bottom: 10px;
	}
</style>
